<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <H1>321321</H1>
    <div id="app">
        <div class="row" style=" margin: 10px auto; max-width: 900px;">
            <div class="col-md-3 col-sm-3" style="display: flex;">
               <span style="white-space: nowrap; line-height: 34px;">商品名称:</span>
               <input type="text " class="form-control" v-model='newgood.name'>
            </div>
            <div class="col-md-3 col-sm-3" style="display: flex;">
                <span style="white-space: nowrap; line-height: 34px;">商品价格:</span>
                <input type="number" class="form-control" v-model.number='newgood.price'>
             </div >
             <div class="col-md-3 col-sm-3" style="display: flex;">
                <span style="white-space: nowrap; line-height: 34px;">商品数量:</span>
                <input type="number" class="form-control" v-model.number='newgood.num'>
             </div>
             <div class="col-md-3 col-sm-3">
                <button class="btn btn-success btn-sm" @click='push'>添加商品</button>
             </div>
            
        </div>
        <table class="table table-bordered table-hover" style="max-width: 800px; margin: 30px auto ;">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>购买数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if='list.length==0' style="text-align: center;">
                    <td colspan="5">暂无商品呢</td>
                </tr>
                <tr v-for='(item,index) in list'>
                    <td>
                        <input type="checkbox" v-model='item.checked' @change='checked'>{{item.name}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button class="btn btn-xs bg-primary" @click='add(index)'>+</button>
                        {{item.num}}
                        <button class="btn btn-xs bg-primary" @click=sub(index)>-</button>
                    </td>
                    <td>
                        {{(item.price * item.num).toFixed(2)}}
                    </td>
                    <td>
                        <button class="btn btn-danger btn-xs" @click='del(index)'>删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot v-if='list.length!=0'>
                <tr >
                    <td><input type="checkbox" v-model='allckeck' @change='all'>全选</td>
                    <td colspan="4" style="text-align: center;">总价：{{tital}}</td>
                </tr>
            </tfoot>
        </table>
        
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            newgood:{
                name:'',
                price:null,
                num:null,
                checked:true
            },
            list:[
                {
                    name:'商品1',
                    price:10.09,
                    num:1,
                    checked:true
                },
                {
                    name:'商品2',
                    price:20.2,
                    num:1,
                    checked:false
                },
                {
                    name:'商品3',
                    price:30.3,
                    num:1,
                    checked:true
                },
                {
                    name:'商品4',
                    price:70.5,
                    num:1,
                    checked:true
                }
            ],
            tital:null,
            allckeck:true
        },
        methods:{
            // 判断有无商品
            pandun(){
                // return this.newgood.name && this.newgood.price && this.newgood.num
                var a=true
                for(var key in this.newgood){
                    a=a&& this.newgood[key]
                    
                }
                return a
            },
            // 重置添加商品
            revser(){
                this.newgood.name='';
                this.newgood.price='';
                this.newgood.num='';

                // this.newgood={}
            },
            // 添加商品方法

            push(){
                
                if(this.pandun()){
                    let {name,price,num,checked}=this.newgood
                    this.list.push({
                        name,price,num,checked
                    })
                    this.revser()
                }else{
                    alert('dont')
                }
                
                
            },

            // 添加商品方法


            all(){
                
                this.list.forEach(item=>{
                    item.checked=this.allckeck
                })
                this.sum()
            },
            checked(){
                this.sel();
                this.sum()
            },
            // 判断全选
            sel(){

                this.allckeck=this.list.every(item=>item.checked)
                if(this.list.length==0){
                    this.allckeck=false
                }
            },
            del(index){
                if(confirm('确定删除吗？')){
                    this.list.splice(index,1)
                    this.sel()
                    this.sum()
                }
            },
            sub(index){
                this.list[index].num--
                if(this.list[index].num<=1){
                    this.list[index].num=1
                }
                this.sum()
            },
            add(index){
                this.list[index].num++
                this.sum()
            },
            sum(){
                this.tital=0
                let sumlist=this.list.filter(item=>item.checked)
                sumlist.forEach(item => {
                    this.tital+=item.price * item.num
                })
                this.tital=this.tital.toFixed(2)
            }
        }
    })
    vm.sum()
    vm.sel()
</script>
</html>